import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:my_flutter_tool/modle/app_state.dart';
import 'package:my_flutter_tool/modle/comment.dart';
import 'package:my_flutter_tool/util/app_util.dart';
import 'package:my_flutter_tool/widgets/loaders/dance_loader.dart';
import 'package:my_flutter_tool/widgets/loaders/hor_loader.dart';
import 'package:provider/provider.dart';

import 'comment_fild.dart';
import 'commrnt_floor.dart';

class CommentBox extends StatefulWidget {
  const CommentBox({Key key}) : super(key: key);

  @override
  _CommentBoxState createState() => _CommentBoxState();
}

class _CommentBoxState extends State<CommentBox> {
  ///评论模型
  CommentModle _modle;

  ///是否关闭
  bool _isClose = false;

  @override
  void initState() {
    super.initState();
    _modle = CommentModle()..init();
  }

  @override
  void dispose() {
    _modle.clear();
    super.dispose();
  }

  ///显示评论框
  _showCommentFild() async {
    await showModalBottomSheet(
      context: context,
      elevation: 0,
      barrierColor: Colors.black12,
      backgroundColor: Colors.transparent,
      isScrollControlled: true,
      builder: (_) => CommentFild(modle: _modle),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      child: SizedBox(
        height: MediaQueryData.fromWindow(window).size.height * 0.7,
        child: NotificationListener(
          onNotification: (ScrollNotification n) {
            if (n.metrics.pixels < -80 && !_isClose) {
              _isClose = true;
              Navigator.pop(context);
            }

            return true;
          },
          child: ChangeNotifierProvider<CommentModle>(
            create: (c) => _modle,
            child: Column(
              children: [
                Container(
                  height: 40,
                  padding: EdgeInsets.symmetric(horizontal: 10),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      IconButton(
                        icon: Icon(Icons.close, color: Colors.transparent),
                        onPressed: null,
                      ),
                      Selector(
                        selector: (_, CommentModle comment) =>
                            comment.commrntCount,
                        builder: (_, int count, child) {
                          return Text('评论($count)');
                        },
                      ),
                      IconButton(
                        icon: Icon(Icons.close, size: 18),
                        onPressed: () => Navigator.pop(context),
                      ),
                    ],
                  ),
                ),
                Expanded(
                  child: Selector(
                    selector: (_, CommentModle comment) => comment.commentState,
                    builder: (_, ViewState state, child) {
                      return state == ViewState.ready
                          ? const Center(child: DanceLoader())
                          : child;
                    },
                    child: Selector(
                      selector: (_, CommentModle comment) => comment.floorList,
                      builder: (_, List<Floor> list, __) {
                        return Selector(
                          selector: (_, CommentModle comment) =>
                              comment.commrntCount,
                          builder: (_, int count, c) {
                            return ListView.builder(
                              physics: A.appPhysics,
                              itemCount: list.length + 1,
                              itemBuilder: (_, index) {
                                if (index == count) {
                                  return Padding(
                                    padding: const EdgeInsets.symmetric(
                                        vertical: 20),
                                    child: const Text('没有更多了',
                                        textAlign: TextAlign.center),
                                  );
                                }

                                if (index >= list.length) {
                                  _modle.loadMoreFloor();

                                  return Padding(
                                    padding: const EdgeInsets.symmetric(
                                        vertical: 20),
                                    child: const HorLoader(),
                                  );
                                }

                                return CommentFloor(index: index);
                              },
                            );
                          },
                        );
                      },
                    ),
                  ),
                ),
                Container(
                  padding: EdgeInsets.symmetric(horizontal: 20, vertical: 6),
                  height: 50,
                  color: Colors.white,
                  child: FlatButton(
                    color: Colors.grey[200],
                    shape: const StadiumBorder(),
                    onPressed: () => _showCommentFild(),
                    child: Row(
                      children: [
                        Icon(Icons.insert_emoticon, color: Colors.black12),
                        Icon(Icons.image, color: Colors.black12),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
